<template>
  <!--  -->
  <div class="provinces">
    <div class="provinces_select">
      <span
        class="title"
        :style="
          'color:' +
            color +
            ';font-size:' +
            (size === 'mini' ? '12px' : '14px') +
            (weight === 700 ? ';font-weight: 700' : ';font-weight:400')
        "
      >
        <slot name="title"> 请选择省市区 </slot>
      </span>
      <div class="provinces_option">
        <el-select
          v-model="addressArea.Province"
          :disabled="disabled"
          :loading="provinceLoading"
          :size="size"
          placeholder="请选择省"
        >
          <el-option
            v-for="item in provinceOptions"
            :key="item.id"
            :label="item.areaName"
            :value="(item.areaName + ',' + item.id).split(',')"
          />
        </el-select>
        <el-select
          v-model="addressArea.City"
          :loading="cityLoading"
          :disabled="disabled"
          :size="size"
          placeholder="请选择市"
          loading-text="请先选择省"
        >
          <el-option
            v-for="item in cityOptions"
            :key="item.id"
            :label="item.areaName"
            :value="(item.areaName + ',' + item.id).split(',')"
          />
        </el-select>
        <el-select
          v-model="addressArea.District"
          :loading="districtLoading"
          :disabled="disabled"
          :size="size"
          placeholder="请选择区"
          loading-text="请先选择市"
        >
          <el-option
            v-for="item in districtOptions"
            :key="item.id"
            :label="item.areaName"
            :value="(item.areaName + ',' + item.id).split(',')"
          />
        </el-select>
        <div v-if="verifyShow" class="provinces_verify">请选择省市区地址</div>
      </div>
    </div>
  </div>
</template>

<script>
import { selector } from '@/api/iam/area.js'
export default {
  props: {
    size: {
      type: String,
      default: 'small'
    },
    color: {
      type: String,
      default: ''
    },
    weight: {
      type: Number,
      default: 400
    },
    provinceValue: {
      type: Array,
      default: Array,
      required: false
    },
    cityValue: {
      type: Array,
      default: Array,
      required: false
    },
    districtValue: {
      type: Array,
      default: Array,
      required: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      provinceLoading: true,
      cityLoading: true,
      districtLoading: true,
      verifyShow: false,
      provinceOptions: [],
      cityOptions: [],
      districtOptions: [],
      addressArea: {
        Province: '',
        City: '',
        District: ''
      }
    }
  },
  watch: {
    async 'addressArea.Province'(newValue, oldValue) {
      if (this.provinceValue.length !== 0 && this.provinceValue[0] !== oldValue) {
        const res = await selector({ areaParentId: this.provinceValue[1] })
        this.cityOptions = res
        this.cityLoading = false
      } else if (newValue !== oldValue) {
        this.addressArea.City = ''
        this.addressArea.District = ''
        this.cityLoading = false
        this.districtLoading = true
        const res = await selector({ areaParentId: newValue[1] })
        this.cityOptions = res
      }
    },
    async 'addressArea.City'(newValue, oldValue) {
      if (this.cityValue.length !== 0 && this.cityValue[0] !== oldValue) {
        const res = await selector({ areaParentId: this.cityValue[1] })
        this.districtOptions = res
        this.districtLoading = false
      } else if (newValue !== oldValue && newValue !== '') {
        this.addressArea.District = ''
        const res = await selector({ areaParentId: newValue[1] })
        this.districtOptions = res
        this.districtLoading = false
      } else {
        return
      }
    },
    async 'addressArea.District'(newValue, oldValue) {
      if (newValue !== oldValue && newValue instanceof Array) {
        this.verifyShow = false
        this.$emit('backAddress', this.addressArea)
      } else {
        return
      }
    },
    'provinceValue'(newValue, oldValue) {
      this.addressArea.Province = newValue[0]
    },
    'cityValue'(newValue, oldValue) {
      this.addressArea.City = newValue[0]
    },
    'districtValue'(newValue, oldValue) {
      this.addressArea.District = newValue[0]
    }
  },
  async mounted() {
    await this.provinceSelect()
    if (this.provinceValue.length !== 0) {
      this.addressArea.Province = this.provinceValue[0]
    }
    if (this.cityValue.length !== 0) this.addressArea.City = this.cityValue[0]
    if (this.districtValue.length !== 0) {
      this.addressArea.District = this.districtValue[0]
    }
  },
  methods: {
    async provinceSelect() {
      this.provinceLoading = true
      const res = await selector({ areaParentId: 100000 })
      this.provinceOptions = res
      this.provinceLoading = false
    },
    rulesVerify() {
      for (const key in this.addressArea) {
        console.log(this.addressArea[key])
        if (!this.addressArea[key]) {
          this.verifyShow = true
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.provinces {
  .provinces_select {
    display: inline-block;
    margin: 10px 15px;
    .title {
      font-size: 16px;
      i {
        font-size: 14px;
        color: red;
      }
    }
    .el-select {
      margin: 0 10px;
    }
    .provinces_option {
      display: inline-block;
      position: relative;
      .provinces_verify {
        position: absolute;
        left: 10px;
        color: red;
      }
    }
  }
}
</style>
